<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getPostDetailApi, cancelSupportApi, supportApi } from "@/api/post";
import { addCommentApi, getCommentApi } from "@/api/comment";
import dayjs from "dayjs";
import PostActions from "@/components/postActions.vue";
import { getUserInfo } from "@/api/user";
import * as lodash from "lodash";
import comment from "@/components/comment.vue";

const route = useRoute();

const id = computed(() => route.params.id);

// 格式化日期
const date = computed(() =>
  dayjs(post?.value?.createdAt).format("YYYY-MM-DD:hh:mm")
);

const post = ref<IPost>();
const getPostDetail = async () => {
  const res = await getPostDetailApi(+id.value);
  post.value = res.data;
};

const isLike = ref(false);
const setIsLike = async () => {
  const user = await getUserInfo();
  console.log(user.data.Support);
  isLike.value =
    user.data.Support.findIndex(
      (item: ISupport) => item.postId + "" == id.value
    ) !== -1;

  console.log(isLike.value);
};

const debanceLike = lodash.debounce(async () => {
  await supportApi(+id.value);
}, 500);
const debanceLikeCancel = lodash.debounce(async () => {
  await cancelSupportApi(+id.value);
}, 500);
const handleLuke = () => {
  if (isLike.value) {
    debanceLikeCancel();
    isLike.value = false;
  } else {
    debanceLike();
    isLike.value = true;
  }
};

const useComment = () => {
  const show = ref(false);

  const commentForm = ref<{
    postId: number;
    content: string;
    parentId?: number;
  }>({
    postId: +id.value,
    content: "",
    parentId: undefined,
  });
  const addComment = async () => {
    await addCommentApi(commentForm.value);
    show.value = false;
    getCommentList();
    commentForm.value.content = "";
  };

  const commentList = ref<IComment[]>();
  const getCommentList = async () => {
    const res = await getCommentApi(id.value + "");
    commentList.value = res.data;
  };

  const handelComment = (showComment: boolean) => {
    console.log(showComment);
    show.value = showComment;
  };

  const handelReply = (parentId: number) => {
    commentForm.value.parentId = parentId;
    show.value = true;
  };

  return {
    addComment,
    commentList,
    getCommentList,
    handelComment,
    show,
    handelReply,
    commentForm,
  };
};

const {
  addComment,
  getCommentList,
  handelComment,
  commentList,
  show,
  commentForm,
  handelReply,
} = useComment();

onMounted(async () => {
  await getPostDetail();
  await setIsLike();
  await getCommentList();
});
</script>

<template>
  <div class="detail">
    <VanNavBar title="详情" left-arrow @click-left="$router.back()"></VanNavBar>
    <div class="detail__main">
      <div class="detail__title">{{ post?.title }}</div>
      <div class="detail__userInfo">
        <div class="detail__userInfo-avatar">
          <img
            v-if="post?.User.avatar"
            :src="'http://localhost:3000/' + post.User.avatar"
            alt=""
          />
          <img src="../../assets/vue.svg" alt="" />
        </div>
        <div class="detail__userInfo-name">{{ post?.User.username }}</div>
      </div>
      <div class="detail__postInfo">
        <div class="detail__postInfo-date">{{ date }}</div>
        <div class="detail__postInfo-readNum">阅读量: {{ post?.readNum }}</div>
      </div>
      <v-md-preview :text="post?.content"></v-md-preview>

      <comment :comment-list="commentList" @reply="handelReply" />

      <PostActions
        :is-like="isLike"
        @like="handleLuke"
        @comment="handelComment"
      />
    </div>

    <van-popup v-model:show="show">
      <div class="detail__comment">
        <van-form>
          <van-cell-group inset>
            <van-field
              v-model="commentForm.content"
              label="评论"
              placeholder="请输入评论....."
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              @click="addComment"
            >
              评论
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
